<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>廖哥哥在工作中遇到的问题 | 永恒的金色年华</title>
  <meta name="description" content="常用方法：1. 手动上传文件整个校验过程(带进度条)123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919">
<meta property="og:type" content="article">
<meta property="og:title" content="廖哥哥在工作中遇到的问题">
<meta property="og:url" content="https://xulujin.gitee.io/blog/2020/07/17/%E5%BB%96%E5%93%A5%E5%93%A5%E5%B7%A5%E4%BD%9C%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/index.html">
<meta property="og:site_name" content="LuKing">
<meta property="og:description" content="常用方法：1. 手动上传文件整个校验过程(带进度条)123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-07-17T06:31:29.000Z">
<meta property="article:modified_time" content="2021-08-20T07:21:25.521Z">
<meta property="article:author" content="LuKing-Xun">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://xulujin.gitee.io/blog/2020/07/17/%E5%BB%96%E5%93%A5%E5%93%A5%E5%B7%A5%E4%BD%9C%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/index.html">
  
    <link rel="alternate" href="/atom.xml" title="LuKing" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
  
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css">
  
  
  
<meta name="generator" content="Hexo 5.2.0"></head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/1314xulujin" target="_blank">
          <img class="img-circle img-rotate" src="/blog/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">LuKing-Xun</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">前端工程师</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Shenzhen, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="Type something..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/blog/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">Home</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">Archives</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">Categories</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">Tags</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-repository">
          <a href="/blog/repository">
            
            <i class="icon icon-project"></i>
            
            <span class="menu-title">Repository</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-books">
          <a href="/blog/books">
            
            <i class="icon icon-book-fill"></i>
            
            <span class="menu-title">Books</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/blog/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">Links</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/blog/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">About</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/1314xulujin" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://mail.qq.com/cgi-bin/loginpage" target="_blank" title="Email" data-toggle=tooltip data-placement=top><i class="icon icon-email"></i></a></li>
        
        <li><a href="/blog/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>一如前端深似海,回头?...没头回了!</p>
            </div>
        </div>
    </div>
</div>

    
      

    
      
  <div class="widget">
    <h3 class="widget-title">Tags</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/BFC/" rel="tag">BFC</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/BootStrap/" rel="tag">BootStrap</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ES6/" rel="tag">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/HTML5-css3/" rel="tag">HTML5+css3</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/OOP%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E6%80%9D%E6%83%B3/" rel="tag">OOP面向对象思想</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Storage%E5%AD%98%E5%82%A8/" rel="tag">Storage存储</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Web-Worker/" rel="tag">Web Worker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ajax/" rel="tag">ajax</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/call%E5%92%8Capply/" rel="tag">call和apply</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css3/" rel="tag">css3</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/git/" rel="tag">git</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/" rel="tag">hexo搭建博客</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/html4/" rel="tag">html4</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jQuery/" rel="tag">jQuery</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/java/" rel="tag">java</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/js/" rel="tag">js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/photoshop/" rel="tag">photoshop</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/vue/" rel="tag">vue</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webpack/" rel="tag">webpack</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/websocket/" rel="tag">websocket</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/window10/" rel="tag">window10</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%86%B7%E7%9F%A5%E8%AF%86/" rel="tag">冷知识</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96/" rel="tag">函数柯里化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" rel="tag">前端工程化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="tag">前端面试题</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8FUI%E6%A1%86%E6%9E%B6/" rel="tag">微信小程序UI框架</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E6%95%99%E7%A8%8B/" rel="tag">教程</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E6%99%BA%E6%89%AC%E4%BF%A1%E8%BE%BE/" rel="tag">智扬信达</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E6%9C%AC%E7%A7%91%E8%80%83%E8%AF%95%E7%A7%91%E7%9B%AE/" rel="tag">本科考试科目</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%B7%A8%E5%9F%9F/" rel="tag">跨域</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag">软件设计模式</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" rel="tag">软实力</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">10</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="tag">面试题</a><span class="tag-list-count">7</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget-body tagcloud">
      <a href="/blog/tags/BFC/" style="font-size: 13px;">BFC</a> <a href="/blog/tags/BootStrap/" style="font-size: 13px;">BootStrap</a> <a href="/blog/tags/ES6/" style="font-size: 13px;">ES6</a> <a href="/blog/tags/HTML5-css3/" style="font-size: 13px;">HTML5+css3</a> <a href="/blog/tags/OOP%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E6%80%9D%E6%83%B3/" style="font-size: 13px;">OOP面向对象思想</a> <a href="/blog/tags/Storage%E5%AD%98%E5%82%A8/" style="font-size: 13px;">Storage存储</a> <a href="/blog/tags/Web-Worker/" style="font-size: 13px;">Web Worker</a> <a href="/blog/tags/ajax/" style="font-size: 13px;">ajax</a> <a href="/blog/tags/call%E5%92%8Capply/" style="font-size: 13px;">call和apply</a> <a href="/blog/tags/css3/" style="font-size: 13px;">css3</a> <a href="/blog/tags/git/" style="font-size: 13px;">git</a> <a href="/blog/tags/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/" style="font-size: 13px;">hexo搭建博客</a> <a href="/blog/tags/html4/" style="font-size: 13px;">html4</a> <a href="/blog/tags/jQuery/" style="font-size: 13px;">jQuery</a> <a href="/blog/tags/java/" style="font-size: 13px;">java</a> <a href="/blog/tags/javascript/" style="font-size: 13.14px;">javascript</a> <a href="/blog/tags/js/" style="font-size: 13px;">js</a> <a href="/blog/tags/photoshop/" style="font-size: 13px;">photoshop</a> <a href="/blog/tags/vue/" style="font-size: 13.71px;">vue</a> <a href="/blog/tags/webpack/" style="font-size: 13.14px;">webpack</a> <a href="/blog/tags/websocket/" style="font-size: 13px;">websocket</a> <a href="/blog/tags/window10/" style="font-size: 13px;">window10</a> <a href="/blog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 13px;">其他</a> <a href="/blog/tags/%E5%86%B7%E7%9F%A5%E8%AF%86/" style="font-size: 13.14px;">冷知识</a> <a href="/blog/tags/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96/" style="font-size: 13px;">函数柯里化</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 13.43px;">前端</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" style="font-size: 13px;">前端工程化</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" style="font-size: 13.86px;">前端面试题</a> <a href="/blog/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8FUI%E6%A1%86%E6%9E%B6/" style="font-size: 13px;">微信小程序UI框架</a> <a href="/blog/tags/%E6%95%99%E7%A8%8B/" style="font-size: 13px;">教程</a> <a href="/blog/tags/%E6%99%BA%E6%89%AC%E4%BF%A1%E8%BE%BE/" style="font-size: 13.29px;">智扬信达</a> <a href="/blog/tags/%E6%9C%AC%E7%A7%91%E8%80%83%E8%AF%95%E7%A7%91%E7%9B%AE/" style="font-size: 13px;">本科考试科目</a> <a href="/blog/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 13px;">跨域</a> <a href="/blog/tags/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 13px;">软件设计模式</a> <a href="/blog/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" style="font-size: 13px;">软实力</a> <a href="/blog/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 14px;">面试</a> <a href="/blog/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/" style="font-size: 13.57px;">面试题</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">Archive</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/06/">六月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/05/">五月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/01/">一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/11/">十一月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/08/">八月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/06/">六月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/05/">五月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/04/">四月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/02/">二月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/09/">九月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/08/">八月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/07/">七月 2020</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/06/">六月 2020</a><span class="archive-list-count">12</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/05/">五月 2020</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/04/">四月 2020</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">三月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/02/">二月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/01/">一月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/12/">十二月 2019</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/11/">十一月 2019</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/10/">十月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/12/">十二月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/10/">十月 2018</a><span class="archive-list-count">6</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/06/16/%E5%B0%86node-sass%E6%8D%A2%E6%88%90dart-sass/" class="title">将node-sass换成dart-sass</a>
              </p>
              <p class="item-date">
                <time datetime="2022-06-16T04:55:29.000Z" itemprop="datePublished">2022-06-16</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/05/25/%E8%87%AA%E5%B7%B1%E5%AF%B9%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E5%8F%8A%E4%BA%A4%E4%BB%98%E6%B5%81%E7%A8%8B%E7%90%86%E8%A7%A3/" class="title">自己对软件开发及交付流程理解</a>
              </p>
              <p class="item-date">
                <time datetime="2022-05-25T06:31:29.000Z" itemprop="datePublished">2022-05-25</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/05/16/web%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E5%85%B3%E9%94%AE%E8%AF%8D/" class="title">web前端关键词</a>
              </p>
              <p class="item-date">
                <time datetime="2022-05-16T03:21:19.000Z" itemprop="datePublished">2022-05-16</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/01/19/%E5%AD%97%E8%8A%82%E9%A3%9E%E4%B9%A6%E9%9D%A2%E8%AF%95%E9%A2%98_20220119/" class="title">腾讯互娱面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2022-01-19T02:10:23.000Z" itemprop="datePublished">2022-01-19</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2021/11/12/js%E5%B0%86%E5%A4%9A%E4%B8%AA%E5%9B%BE%E7%89%87%E6%8B%BC%E5%9C%A8%E4%B8%80%E8%B5%B7%E4%B8%8B%E8%BD%BD%E6%88%90%E4%B8%80%E5%BC%A0%E5%9B%BE%E7%89%87/" class="title">(no title)</a>
              </p>
              <p class="item-date">
                <time datetime="2021-11-12T04:28:18.079Z" itemprop="datePublished">2021-11-12</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-廖哥哥工作中遇到的问题" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      廖哥哥在工作中遇到的问题
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/blog/2020/07/17/%E5%BB%96%E5%93%A5%E5%93%A5%E5%B7%A5%E4%BD%9C%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/" class="article-date">
	  <time datetime="2020-07-17T06:31:29.000Z" itemprop="datePublished">2020-07-17</time>
	</a>
</span>
        
        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a>
  </span>


        

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/blog/2020/07/17/%E5%BB%96%E5%93%A5%E5%93%A5%E5%B7%A5%E4%BD%9C%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/#comments" class="article-comment-link">Comments</a></span>
        
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h4 id="常用方法："><a href="#常用方法：" class="headerlink" title="常用方法："></a>常用方法：</h4><h5 id="1-手动上传文件整个校验过程-带进度条"><a href="#1-手动上传文件整个校验过程-带进度条" class="headerlink" title="1. 手动上传文件整个校验过程(带进度条)"></a>1. 手动上传文件整个校验过程(带进度条)</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"> &lt;el-upload</span><br><span class="line">          ref=<span class="string">&quot;refs&quot;</span></span><br><span class="line">          <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;upload-demo&quot;</span></span><br><span class="line">          action=<span class="string">&quot;UploadUrl()&quot;</span></span><br><span class="line">          :on-change=<span class="string">&quot;increaseHandleChange&quot;</span></span><br><span class="line">          :before-remove=<span class="string">&quot;increaseHandleRemove&quot;</span></span><br><span class="line">          :limit=<span class="string">&quot;limitNum&quot;</span></span><br><span class="line">          :fileList=<span class="string">&quot;increaseStauts.incrsessionStorageeaseFileList&quot;</span></span><br><span class="line">          :auto-upload=<span class="string">&quot;false&quot;</span></span><br><span class="line">          :on-exceed=<span class="string">&quot;increaseExceedFile&quot;</span></span><br><span class="line">          :on-success=<span class="string">&quot;increaseHandleSuccess&quot;</span></span><br><span class="line">          :on-error=<span class="string">&quot;increaseHandleError&quot;</span></span><br><span class="line">        &gt;</span><br><span class="line">          &lt;el-button</span><br><span class="line">            size=<span class="string">&quot;small&quot;</span></span><br><span class="line">            type=<span class="string">&quot;primary&quot;</span></span><br><span class="line">            :disabled=<span class="string">&quot;increaseStauts.isDisabled&quot;</span></span><br><span class="line">            &gt;导入Excel&lt;/el-button</span><br><span class="line">          &gt;</span><br><span class="line">          &lt;el-button type=<span class="string">&quot;text&quot;</span> @click=<span class="string">&quot;increaseDownloadFile&quot;</span></span><br><span class="line">            &gt;下载模板&lt;/el-button</span><br><span class="line">          &gt;</span><br><span class="line">          &lt;div slot=<span class="string">&quot;tip&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;el-upload__tip&quot;</span>&gt;只能上传后缀为.xslx的文件&lt;/div&gt;</span><br><span class="line">        &lt;/el-upload&gt;</span><br><span class="line">        &lt;div v-<span class="keyword">if</span>=<span class="string">&quot;progressSeen&quot;</span>&gt;</span><br><span class="line">          &lt;el-progress :percentage=<span class="string">&quot;progress&quot;</span>&gt;&lt;/el-progress&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">        progress: <span class="number">0</span>, <span class="comment">// 进度条百分比</span></span><br><span class="line">        progressSeen: <span class="literal">false</span>, <span class="comment">// 是否显示进度条</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 文件改变时的校验</span></span><br><span class="line">    <span class="function"><span class="title">increaseHandleChange</span>(<span class="params">file, fileList</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.emptyData();</span><br><span class="line">      <span class="built_in">this</span>.increaseStauts.increaseFileList.push(file.raw);</span><br><span class="line">      <span class="comment">// 上传文件之前做前端校验</span></span><br><span class="line">      <span class="keyword">let</span> extension = file.name.substring(file.name.lastIndexOf(<span class="string">&quot;.&quot;</span>) + <span class="number">1</span>);</span><br><span class="line">      <span class="keyword">if</span> (extension !== <span class="string">&quot;xlsx&quot;</span>) &#123;</span><br><span class="line">        <span class="built_in">this</span>.increaseStauts.increaseFileList = [];</span><br><span class="line">        <span class="built_in">this</span>.$message.error(<span class="string">&quot;只能上传后缀是.xlsx的文件&quot;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 文件超出个数限制时的钩子</span></span><br><span class="line">    <span class="function"><span class="title">increaseExceedFile</span>(<span class="params">files, fileList</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.$message.error(</span><br><span class="line">        <span class="string">`只能选择 <span class="subst">$&#123;<span class="built_in">this</span>.limitNum&#125;</span> 个文件，当前共选择了 <span class="subst">$&#123;</span></span></span><br><span class="line"><span class="string"><span class="subst">          files.length + fileList.length</span></span></span><br><span class="line"><span class="string"><span class="subst">        &#125;</span> 个`</span></span><br><span class="line">      );</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 文件列表移除文件时的钩子</span></span><br><span class="line">    <span class="function"><span class="title">increaseHandleRemove</span>(<span class="params">file, fileList</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.$confirm(<span class="string">`确定移除 <span class="subst">$&#123;file.name&#125;</span>？`</span>)</span><br><span class="line">        .then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="built_in">this</span>.$message(&#123;</span><br><span class="line">            type: <span class="string">&quot;success&quot;</span>,</span><br><span class="line">            message: <span class="string">&quot;删除成功!&quot;</span>,</span><br><span class="line">          &#125;);</span><br><span class="line">          <span class="built_in">this</span>.increaseStauts.increaseFileList = [];</span><br><span class="line">          <span class="built_in">this</span>.progress = <span class="number">0</span>;</span><br><span class="line">          <span class="built_in">this</span>.progressSeen = <span class="literal">false</span>;</span><br><span class="line">        &#125;)</span><br><span class="line">        .catch(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="built_in">this</span>.$message(&#123;</span><br><span class="line">            type: <span class="string">&quot;info&quot;</span>,</span><br><span class="line">            message: <span class="string">&quot;已取消删除!&quot;</span>,</span><br><span class="line">          &#125;);</span><br><span class="line">          reject(<span class="literal">false</span>);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 文件上传失败时的钩子</span></span><br><span class="line">    <span class="function"><span class="title">increaseHandleError</span>(<span class="params">err, file, fileList</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.$message.error(<span class="string">&quot;文件上传失败!&quot;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 文件上传成功时的钩子</span></span><br><span class="line">    <span class="function"><span class="title">increaseHandleSuccess</span>(<span class="params">res, file, fileList</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.$message.success(<span class="string">&quot;文件上传成功!&quot;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 点击保存上传文件</span></span><br><span class="line">    <span class="function"><span class="title">increaseUploadFile</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="built_in">this</span>.increaseStauts.increaseFileList.length === <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="built_in">this</span>.$message.error(<span class="string">&quot;请导入Excel上传文件!&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">//显示进度</span></span><br><span class="line">        <span class="built_in">this</span>.progressSeen = <span class="literal">true</span>;</span><br><span class="line">        <span class="keyword">let</span> form = <span class="keyword">new</span> FormData(); <span class="comment">// 创建对象</span></span><br><span class="line">        form.append(<span class="string">&quot;file&quot;</span>, <span class="built_in">this</span>.increaseStauts.increaseFileList[<span class="number">0</span>]); <span class="comment">// 添加值</span></span><br><span class="line">        <span class="comment">// form.append(&quot;file&quot;, this.increaseStauts.increaseFileList[1]); // 可继续添加单个传送</span></span><br><span class="line">        <span class="comment">// form.append(&quot;data&quot;, JSON.stringify(this.increaseStauts.increaseFileList[3])); // 也转成对象</span></span><br><span class="line">        <span class="built_in">this</span>.$axios(&#123;</span><br><span class="line">          method: <span class="string">&quot;post&quot;</span>,</span><br><span class="line">          url: <span class="string">`<span class="subst">$&#123;baseUrl&#125;</span>/pos/usage/uploadExcel`</span>,</span><br><span class="line">          headers: &#123;</span><br><span class="line">            <span class="string">&quot;Content-type&quot;</span>: <span class="string">&quot;multipart/form-data&quot;</span>,</span><br><span class="line">          &#125;,</span><br><span class="line">          data: form,</span><br><span class="line">          onUploadProgress: <span class="function">(<span class="params">progressEvent</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">var</span> complete =</span><br><span class="line">              ((progressEvent.loaded / progressEvent.total) * <span class="number">100</span>) | <span class="number">0</span>;</span><br><span class="line">            <span class="built_in">this</span>.progress = complete;</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;).then(</span><br><span class="line">          (res) =&gt; &#123;</span><br><span class="line">            <span class="built_in">this</span>.increaseHandleSuccess();</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&quot;文件上传成功!&quot;</span>, res);</span><br><span class="line">            <span class="keyword">let</span> resdata = res.data.data;</span><br><span class="line">            <span class="built_in">this</span>.increaseStauts.increase_a = <span class="literal">true</span>;</span><br><span class="line">            <span class="built_in">this</span>.increaseStauts.successCount = resdata.successCount;</span><br><span class="line">            <span class="keyword">if</span> (resdata.failCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">              <span class="built_in">this</span>.increaseStauts.failCount = resdata.failCount;</span><br><span class="line">              <span class="built_in">this</span>.increaseStauts.msg = resdata.message;</span><br><span class="line">              <span class="built_in">this</span>.increaseStauts.data = resdata.data;</span><br><span class="line">              <span class="built_in">this</span>.increaseStauts.increase_b = <span class="literal">true</span>;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,</span><br><span class="line">          (err) =&gt; &#123;</span><br><span class="line">            <span class="built_in">this</span>.increaseHandleError();</span><br><span class="line">            <span class="built_in">this</span>.increaseStauts.increase_b = <span class="literal">true</span>;</span><br><span class="line">            <span class="built_in">this</span>.increaseStauts.comeFileList.push(err);</span><br><span class="line">          &#125;</span><br><span class="line">        );</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 因为action参数是必填项，二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错</span></span><br><span class="line">    UploadUrl: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="string">&quot;&quot;</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">        <span class="comment">// 重新上传</span></span><br><span class="line">    <span class="function"><span class="title">handleChange</span>(<span class="params">file, fileList</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.increaseHandleChange(file, fileList);</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>



<h5 id="2-下载模板"><a href="#2-下载模板" class="headerlink" title="2. 下载模板"></a>2. 下载模板</h5><h6 id="1-寻常下载"><a href="#1-寻常下载" class="headerlink" title="1. 寻常下载"></a>1. 寻常下载</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">可用windown.open(<span class="string">&quot;接口名称&quot;</span>?=<span class="string">&quot;可带参数&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.open(<span class="string">`<span class="subst">$&#123;process.env.VUE_APP_BASE_API&#125;</span>/quote/export?<span class="subst">$&#123;qs.stringify(params)&#125;</span>`</span>);</span><br></pre></td></tr></table></figure>



<h6 id="2-创建a标签下载后端返回的2进制流"><a href="#2-创建a标签下载后端返回的2进制流" class="headerlink" title="2. 创建a标签下载后端返回的2进制流"></a>2. 创建a标签下载后端返回的2进制流</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 下载失败清单</span></span><br><span class="line">  <span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">downloadList</span>(<span class="params">params</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> uri = baseUrl + <span class="string">`/pos/usage/downloadFailTemplate`</span>;</span><br><span class="line">    <span class="keyword">return</span> fetch2(&#123;</span><br><span class="line">      url: uri,</span><br><span class="line">      method: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">      data: params,</span><br><span class="line">      responseType: <span class="string">&quot;blob&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125; </span><br><span class="line"></span><br><span class="line">api.downloadList(params).then(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> blob = <span class="keyword">new</span> Blob([res], &#123;</span><br><span class="line">          type:</span><br><span class="line">            <span class="string">&quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8&quot;</span>,</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="keyword">let</span> aParts = <span class="built_in">document</span>.createElement(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">        aParts.href = <span class="built_in">window</span>.URL.createObjectURL(blob);</span><br><span class="line">        aParts.download = <span class="string">&quot;失败清单.xlsx&quot;</span>;</span><br><span class="line">        aParts.click();</span><br><span class="line">        <span class="built_in">window</span>.URL.revokeObjectURL(aParts.href);</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自用封装</span></span><br><span class="line">    <span class="function"><span class="title">inventoryDownloadRemove</span>(<span class="params">url, params, name</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.$axios(&#123;</span><br><span class="line">        url: baseUrl + url,</span><br><span class="line">        method: <span class="string">&quot;post&quot;</span>,</span><br><span class="line">        data: params,</span><br><span class="line">        responseType: <span class="string">&quot;blob&quot;</span>,</span><br><span class="line">        headers: &#123; <span class="string">&quot;X-Token&quot;</span>: <span class="string">&quot;&quot;</span> &#125;, <span class="comment">// 每个接口带的token</span></span><br><span class="line">      &#125;).then(<span class="function"><span class="params">res</span> =&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(res.data);</span><br><span class="line">        <span class="keyword">const</span> blob = <span class="keyword">new</span> Blob([res.data], &#123;</span><br><span class="line">          type:</span><br><span class="line">            <span class="string">&quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8&quot;</span>,</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="keyword">let</span> aParts = <span class="built_in">document</span>.createElement(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">        aParts.href = <span class="built_in">window</span>.URL.createObjectURL(blob);</span><br><span class="line">        aParts.download = <span class="string">`<span class="subst">$&#123; name &#125;</span>.xlsx`</span>;</span><br><span class="line">        aParts.click();</span><br><span class="line">        <span class="built_in">window</span>.URL.revokeObjectURL(aParts.href);</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>



<h5 id="3-自用封装前后时间对比方法"><a href="#3-自用封装前后时间对比方法" class="headerlink" title="3. 自用封装前后时间对比方法"></a>3. 自用封装前后时间对比方法</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-form-item label=<span class="string">&quot;导入日期：&quot;</span>&gt;</span><br><span class="line">          &lt;el-col :span=<span class="string">&quot;11&quot;</span>&gt;</span><br><span class="line">            &lt;el-date-picker</span><br><span class="line">              type=<span class="string">&quot;date&quot;</span></span><br><span class="line">              placeholder=<span class="string">&quot;选择日期&quot;</span></span><br><span class="line">              v-model=<span class="string">&quot;form.starttime&quot;</span></span><br><span class="line">              @change=<span class="string">&quot;taskStartChange&quot;</span></span><br><span class="line">              value-format=<span class="string">&quot;yyyy-MM-dd&quot;</span></span><br><span class="line">              style=<span class="string">&quot;width: 100%;&quot;</span></span><br><span class="line">            &gt;&lt;/el-date-picker&gt;</span><br><span class="line">          &lt;/el-col&gt;</span><br><span class="line">          &lt;el-col <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;line flex-row-center-center&quot;</span> :span=<span class="string">&quot;2&quot;</span>&gt;至&lt;/el-col&gt;</span><br><span class="line">          &lt;el-col :span=<span class="string">&quot;11&quot;</span>&gt;</span><br><span class="line">            &lt;el-date-picker</span><br><span class="line">              type=<span class="string">&quot;date&quot;</span></span><br><span class="line">              placeholder=<span class="string">&quot;选择日期&quot;</span></span><br><span class="line">              v-model=<span class="string">&quot;form.endtime&quot;</span></span><br><span class="line">              @change=<span class="string">&quot;taskEndChange&quot;</span></span><br><span class="line">              value-format=<span class="string">&quot;yyyy-MM-dd&quot;</span></span><br><span class="line">              style=<span class="string">&quot;width: 100%;&quot;</span></span><br><span class="line">            &gt;&lt;/el-date-picker&gt;</span><br><span class="line">          &lt;/el-col&gt;</span><br><span class="line">        &lt;/el-form-item&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 封装element时间前后选择对比</span></span><br><span class="line">    <span class="function"><span class="title">isStartGreaterEnd</span>(<span class="params">start, end</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> _this = <span class="built_in">this</span>;</span><br><span class="line">      <span class="keyword">if</span> (start &amp;&amp; end) &#123;</span><br><span class="line">        <span class="keyword">let</span> starDate = <span class="keyword">new</span> <span class="built_in">Date</span>(start);</span><br><span class="line">        <span class="keyword">let</span> endDate = <span class="keyword">new</span> <span class="built_in">Date</span>(end);</span><br><span class="line">        <span class="comment">// 有三种方式获取</span></span><br><span class="line">        <span class="keyword">if</span> (starDate.getTime() - endDate.getTime() &gt; <span class="number">0</span>) &#123;</span><br><span class="line">          _this.$message(&#123;</span><br><span class="line">            message: <span class="string">&quot;开始时间不能大于结束时间&quot;</span>,</span><br><span class="line">            type: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">          &#125;);</span><br><span class="line">          <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">taskStartChange</span>(<span class="params">val</span>)</span> &#123;  </span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.isStartGreaterEnd(<span class="built_in">this</span>.form.starttime, <span class="built_in">this</span>.form.endtime)) &#123;</span><br><span class="line">          <span class="built_in">this</span>.form.starttime = <span class="string">&quot;&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">taskEndChange</span>(<span class="params">val</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.isStartGreaterEnd(<span class="built_in">this</span>.form.starttime, <span class="built_in">this</span>.form.endtime)) &#123;</span><br><span class="line">          <span class="built_in">this</span>.form.endtime = <span class="string">&quot;&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>





<h5 id="4-基于element穿梭框"><a href="#4-基于element穿梭框" class="headerlink" title="4. 基于element穿梭框"></a>4. 基于element穿梭框</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"> &lt;el-transfer</span><br><span class="line">        filterable</span><br><span class="line">        filter-placeholder=<span class="string">&quot;请输入姓名或者人员代码&quot;</span></span><br><span class="line">        v-model=<span class="string">&quot;increaseData&quot;</span></span><br><span class="line">        :data=<span class="string">&quot;icData&quot;</span></span><br><span class="line">        :props=<span class="string">&quot;&#123; key: &#x27;userId&#x27;, label: &#x27;userName&#x27; &#125;&quot;</span></span><br><span class="line">        :titles=<span class="string">&quot;[&#x27;人员列表&#x27;, &#x27;已选人员列表&#x27;]&quot;</span></span><br><span class="line">        :button-texts=<span class="string">&quot;[&#x27;移除&#x27;, &#x27;添加&#x27;]&quot;</span></span><br><span class="line">        @change=<span class="string">&quot;handleChange&quot;</span></span><br><span class="line">        v-loading=<span class="string">&quot;increaseDataisloading&quot;</span></span><br><span class="line">		&gt;&lt;/el-transfer&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 左右数据互动</span></span><br><span class="line"><span class="function"><span class="title">handleChange</span>(<span class="params">value, direction, movedKeys</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (direction === <span class="string">&quot;right&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j <span class="keyword">in</span> movedKeys) &#123;</span><br><span class="line">          <span class="built_in">console</span>.log(movedKeys[j]);</span><br><span class="line">          <span class="built_in">this</span>.icData.forEach(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (item.userId == movedKeys[j]) &#123;</span><br><span class="line">              <span class="built_in">this</span>.userId.push(item);</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (direction === <span class="string">&quot;left&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> movedKeys) &#123;</span><br><span class="line">          <span class="built_in">console</span>.log(movedKeys[i]);</span><br><span class="line">          <span class="built_in">this</span>.userId.forEach(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (item.userId == movedKeys[i]) &#123;</span><br><span class="line">              <span class="built_in">this</span>.userId.splice(index, <span class="number">1</span>);</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>



<h5 id="5-对象全空判断"><a href="#5-对象全空判断" class="headerlink" title="5. 对象全空判断"></a>5. 对象全空判断</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 有一项有值就为true</span></span><br><span class="line">	<span class="keyword">let</span> arr = <span class="number">0</span>;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> <span class="built_in">this</span>.form) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.form[key] != <span class="string">&quot;&quot;</span>) &#123;</span><br><span class="line">          arr++;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">	<span class="keyword">if</span>(arr)&#123;</span><br><span class="line">        <span class="comment">// 不为空</span></span><br><span class="line">    &#125;esle&#123;</span><br><span class="line">        <span class="comment">// 为空</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 封装的判断对象里面某个值是否为空</span></span><br><span class="line"><span class="function"><span class="title">whetherFreeValue</span>(<span class="params">params</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> flag = <span class="literal">true</span>;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> params) &#123;</span><br><span class="line">        <span class="keyword">if</span> (params[key] != <span class="string">&quot;0&quot;</span> &amp;&amp; !params[key]) &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="literal">false</span>; <span class="comment">// 终止程序</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> flag;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断全空 有一项为空就返回</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">in</span> <span class="built_in">this</span>.conditions) &#123;</span><br><span class="line">     <span class="keyword">if</span>(!<span class="built_in">this</span>.conditions[i]) &#123;</span><br><span class="line">         <span class="built_in">this</span>.$message.error(<span class="string">&#x27;请填写完整信息！&#x27;</span>);</span><br><span class="line">         <span class="keyword">return</span>;</span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>



<h5 id="6-自定义权重排序"><a href="#6-自定义权重排序" class="headerlink" title="6. 自定义权重排序"></a>6. 自定义权重排序</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> statusRank = &#123;</span><br><span class="line">            <span class="number">1</span>: <span class="number">1</span>,</span><br><span class="line">            <span class="number">2</span>: <span class="number">2</span>,</span><br><span class="line">            <span class="number">3</span>: <span class="number">4</span>,</span><br><span class="line">            <span class="number">4</span>: <span class="number">3</span>,</span><br><span class="line">          &#125;;</span><br><span class="line"><span class="comment">// res.data.list.sort((a, b) =&gt; (b.submitflag &gt; a.submitflag ? -1 : 1));  // 双重排序 另外一个值也需要排序</span></span><br><span class="line"></span><br><span class="line">res.data.list.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">            item.statusRank = statusRank[item.status];</span><br><span class="line">            &#125;);</span><br><span class="line">res.data.list.sort(<span class="function">(<span class="params">a, b</span>) =&gt;</span> (b.statusRank &gt; a.statusRank ? -<span class="number">1</span> : <span class="number">1</span> )); <span class="comment">// 降序</span></span><br><span class="line"><span class="comment">// res.data.list.sort((a, b) =&gt; b.statusRank - a.statusRank); // 升序</span></span><br></pre></td></tr></table></figure>



<h5 id="7-根据状态改变单元格样式"><a href="#7-根据状态改变单元格样式" class="headerlink" title="7. 根据状态改变单元格样式"></a>7. 根据状态改变单元格样式</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 根据状态改变单元格字体样式</span></span><br><span class="line">    <span class="function"><span class="title">addClass</span>(<span class="params">&#123; row, column, rowIndex, columnIndex &#125;</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (columnIndex === <span class="number">9</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (row.status == <span class="string">&quot;待扣罚&quot;</span> || row.status == <span class="string">&quot;1&quot;</span>) &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="string">&quot;cell-red&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (row.status == <span class="string">&quot;待返还&quot;</span> || row.status == <span class="string">&quot;3&quot;</span>) &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="string">&quot;cell-grey&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>



<h5 id="8-抄袭一段别人封装的WebSoket方法（目前还没弄懂）"><a href="#8-抄袭一段别人封装的WebSoket方法（目前还没弄懂）" class="headerlink" title="8. 抄袭一段别人封装的WebSoket方法（目前还没弄懂）"></a>8. 抄袭一段别人封装的WebSoket方法（目前还没弄懂）</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;../store&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; get &#125; <span class="keyword">from</span> <span class="string">&#x27;tinymce&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> websock = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">var</span> global_callback = <span class="literal">null</span>;       </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> countTime=<span class="number">2</span>*<span class="number">60</span>*<span class="number">1000</span>;    <span class="comment">//访问时间间隔</span></span><br><span class="line"><span class="keyword">var</span> sendcurrCount=<span class="number">0</span>;        </span><br><span class="line"><span class="keyword">var</span> sendCount=<span class="number">5</span>;                <span class="comment">//重连总次数</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> closeCurrCount=<span class="number">0</span>;            <span class="comment">//当前重连的次数</span></span><br><span class="line"><span class="keyword">var</span> closeCount=<span class="number">5</span>;           </span><br><span class="line"><span class="keyword">var</span> cTotalCount=<span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> totalCount=<span class="number">2</span>;           </span><br><span class="line"><span class="keyword">var</span> reconnectTime=<span class="number">10</span>*<span class="number">60</span>*<span class="number">1000</span>;    <span class="comment">//重连时间段</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// var intelvalTime=5*1000;  //重连间隔时间（s）</span></span><br><span class="line"><span class="comment">// var cycleTime=1*60*1000;   //时间周期</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getWebIP=<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> protocol=<span class="string">&#x27;ws://&#x27;</span>;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">window</span>.location.protocol.indexOf(<span class="string">&#x27;https&#x27;</span>)==<span class="number">0</span>)&#123;</span><br><span class="line">        protocol=<span class="string">&#x27;wss://&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> protocol+<span class="built_in">window</span>.location.host</span><br><span class="line">    <span class="comment">//return &quot;ws://58.1.39.62:8080&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//连接weosocket并初始化</span></span><br><span class="line"><span class="keyword">const</span> initWebSocket=<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="string">&quot;WebSocket&quot;</span> <span class="keyword">in</span> <span class="built_in">window</span>)&#123;</span><br><span class="line">        </span><br><span class="line">        <span class="keyword">if</span>(websock!=<span class="literal">null</span>)&#123;</span><br><span class="line">            websock.close(<span class="number">1000</span>,<span class="string">&#x27;正常关闭&#x27;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//ws地址</span></span><br><span class="line">        <span class="comment">//var wsurl = `$&#123;getWebIP()&#125;/picc-stfinance/ws?PICC-Authorization=374837483748348`;</span></span><br><span class="line">        <span class="keyword">var</span> wsurl = <span class="string">`<span class="subst">$&#123;getWebIP()&#125;</span>/picc-stfinance/ws?PICC-Authorization=<span class="subst">$&#123;store.getters.token&#125;</span>`</span>;</span><br><span class="line">        websock = <span class="keyword">new</span> WebSocket(wsurl);</span><br><span class="line">        websock.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// 上一次接收消息的时间</span></span><br><span class="line">            <span class="comment">//upTime=new Date().getTime();</span></span><br><span class="line">            websocketonmessage(e);</span><br><span class="line">        &#125; </span><br><span class="line">        websock.onclose = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">            websocketclose(e);</span><br><span class="line">        &#125;</span><br><span class="line">        websock.onopen = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            websocketOpen();</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//连接发生错误的回调方法</span></span><br><span class="line">        websock.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&quot;WebSocket连接发生错误&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        alert(<span class="string">&quot;您的浏览器不支持WebSocket!&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// websocket心跳机制，防止连接断开</span></span><br><span class="line"><span class="keyword">const</span> heartbeat=<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">window</span>.timer)&#123;</span><br><span class="line">        <span class="comment">//console.log(&#x27;window.timer=====2&#x27;);</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="comment">//console.log(&#x27;window.timer=====1&#x27;);</span></span><br><span class="line">        <span class="built_in">window</span>.timer = <span class="built_in">window</span>.setInterval(sendSock, countTime);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 实际调用的方法(数据发送)</span></span><br><span class="line"><span class="keyword">const</span> sendSock=<span class="function">(<span class="params">agentData=<span class="string">&#x27;&#x27;</span>,callback=<span class="literal">null</span></span>)=&gt;</span>&#123;</span><br><span class="line">    </span><br><span class="line">    global_callback = callback;</span><br><span class="line">    <span class="keyword">if</span> (websock.readyState === websock.OPEN) &#123;</span><br><span class="line">        <span class="comment">//若是ws开启状态</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;close-------1&#x27;</span>);</span><br><span class="line">        websocketsend(agentData);</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span> (websock.readyState === websock.CONNECTING) &#123;</span><br><span class="line">        <span class="comment">// 若是 正在开启状态，则等待1s后重新调用</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;close-------2&#x27;</span>);</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            sendSock(agentData,callback);</span><br><span class="line">        &#125;, <span class="number">5000</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;close-------3&#x27;</span>);</span><br><span class="line">        <span class="keyword">if</span>(sendcurrCount&lt;sendCount)&#123;</span><br><span class="line">            sendcurrCount++;</span><br><span class="line">            initWebSocket();</span><br><span class="line">            <span class="comment">// 若未开启 ，则等待1s后重新调用</span></span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                sendSock(agentData,callback);</span><br><span class="line">            &#125;, <span class="number">5000</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//主动关闭web Socket</span></span><br><span class="line"><span class="keyword">const</span> closeSock=<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// if(window.timer)&#123;</span></span><br><span class="line">    <span class="comment">//     window.clearInterval(window.timer);</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="keyword">if</span>(websock)&#123;</span><br><span class="line">        websock.close(<span class="number">1000</span>,<span class="string">&#x27;正常关闭&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">//数据接收</span></span><br><span class="line"><span class="keyword">const</span> websocketonmessage=<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;websocketonmessage-------&#x27;</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">JSON</span>.parse(e.data));</span><br><span class="line">    <span class="keyword">let</span> data=<span class="built_in">JSON</span>.parse(e.data);</span><br><span class="line">    <span class="keyword">if</span>(data.type==<span class="string">&#x27;stfinance.sys.messagebox&#x27;</span>)&#123;</span><br><span class="line">        store.commit(<span class="string">&#x27;setBoxMessage&#x27;</span>, data.data);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(data.type==<span class="string">&#x27;stfinance.sys.token&#x27;</span>)&#123;</span><br><span class="line">        store.commit(<span class="string">&#x27;setToken&#x27;</span>, data.data);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//if(data.type==&#x27;close_client&#x27;)&#123;</span></span><br><span class="line">        <span class="comment">//closeSock();</span></span><br><span class="line">    <span class="comment">//&#125;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">// if(global_callback&amp;&amp;global_callback instanceof Function)&#123;</span></span><br><span class="line">    <span class="comment">//     console.log(&#x27;websocketonmessage+++++++&#x27;);</span></span><br><span class="line">    <span class="comment">//     global_callback(JSON.parse(e.data));</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">//数据发送</span></span><br><span class="line"><span class="keyword">const</span> websocketsend=<span class="function">(<span class="params">agentData</span>)=&gt;</span>&#123;</span><br><span class="line">    websock.send(agentData);</span><br><span class="line">    <span class="comment">//websock.send(JSON.stringify(agentData));</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">//关闭</span></span><br><span class="line"><span class="keyword">const</span> websocketclose=<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;connection closed (&quot;</span> + e.code + <span class="string">&quot;)&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span>(e.code!=<span class="string">&#x27;1000&#x27;</span>)&#123;</span><br><span class="line">        <span class="keyword">if</span>(closeCurrCount&lt;closeCount&amp;&amp;cTotalCount&lt;totalCount)&#123;</span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">                closeCurrCount++;</span><br><span class="line">                initWebSocket();</span><br><span class="line">            &#125;, <span class="number">5000</span>);</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(closeCurrCount&gt;=closeCount&amp;&amp;cTotalCount&lt;totalCount)&#123;</span><br><span class="line">            cTotalCount++;</span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">                closeCurrCount=<span class="number">0</span>;</span><br><span class="line">                initWebSocket();</span><br><span class="line">            &#125;, reconnectTime);</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            closeSock();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> websocketOpen=<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;WebSocket连接成功&quot;</span>,e);</span><br><span class="line">    closeCurrCount=<span class="number">0</span>;</span><br><span class="line">    cTotalCount=<span class="number">0</span>;</span><br><span class="line">    <span class="comment">//heartbeat();</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123; initWebSocket, heartbeat, sendSock, closeSock &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="9-获取当前链接参数"><a href="#9-获取当前链接参数" class="headerlink" title="9. 获取当前链接参数"></a>9. 获取当前链接参数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取当前链接参数</span></span><br><span class="line">    <span class="function"><span class="title">getQueryVariable</span>(<span class="params">variable</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> query = <span class="built_in">window</span>.location.search.substring(<span class="number">1</span>);</span><br><span class="line">        <span class="keyword">var</span> vars = query.split(<span class="string">&quot;&amp;&quot;</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; vars.length; i++) &#123;</span><br><span class="line">            <span class="keyword">var</span> pair = vars[i].split(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">            <span class="keyword">if</span> (pair[<span class="number">0</span>] == variable) &#123; <span class="keyword">return</span> pair[<span class="number">1</span>]; &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> (<span class="literal">false</span>);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>



<h5 id="10-关于时间的多种方法"><a href="#10-关于时间的多种方法" class="headerlink" title="10. 关于时间的多种方法"></a>10. 关于时间的多种方法</h5><h6 id="1-封装获取日期方法"><a href="#1-封装获取日期方法" class="headerlink" title="1. 封装获取日期方法"></a>1. 封装获取日期方法</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 封装时间处理</span></span><br><span class="line">	<span class="function"><span class="title">dateFormatDay</span>(<span class="params">timestamp</span>)</span> &#123;</span><br><span class="line">		<span class="keyword">let</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(timestamp); <span class="comment">//时间戳为10位需*1000，时间戳为13位的话不需乘1000</span></span><br><span class="line">		<span class="keyword">let</span> Y = date.getFullYear() + <span class="string">&#x27;/&#x27;</span>;</span><br><span class="line">		<span class="keyword">let</span> M = (date.getMonth() + <span class="number">1</span> &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + (date.getMonth() + <span class="number">1</span>) : date.getMonth() + <span class="number">1</span>) + <span class="string">&#x27;/&#x27;</span>;</span><br><span class="line">		<span class="keyword">let</span> D = (date.getDate() &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span>+date.getDate() : date.getDate()) + <span class="string">&#x27; &#x27;</span>;</span><br><span class="line">		<span class="keyword">let</span> h = (date.getHours() &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span>+date.getHours() : date.getHours()) + <span class="string">&#x27;:&#x27;</span>;</span><br><span class="line">		<span class="keyword">let</span> m = (date.getMinutes() &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span>+date.getMinutes() : date.getMinutes()) + <span class="string">&#x27;:&#x27;</span>;</span><br><span class="line">		<span class="keyword">let</span> s = (date.getSeconds() &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span>+date.getSeconds() : date.getSeconds());</span><br><span class="line">		<span class="keyword">return</span> Y + M + D ;</span><br><span class="line">	&#125;,</span><br><span class="line">        </span><br><span class="line">    <span class="comment">// 调用</span></span><br><span class="line">    <span class="function"><span class="title">forDetails</span>(<span class="params">num</span>)</span> &#123;</span><br><span class="line">		<span class="built_in">console</span>.log(num);</span><br><span class="line">		<span class="keyword">let</span> startTime = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="keyword">new</span> <span class="built_in">Date</span>().setHours(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>)); <span class="comment">// 获取当前凌晨的时间</span></span><br><span class="line">		<span class="keyword">let</span> SevenDayAgo;</span><br><span class="line">		<span class="keyword">if</span>(num == <span class="number">1</span>) &#123;</span><br><span class="line">			<span class="comment">// 昨天</span></span><br><span class="line">			SevenDayAgo = startTime - <span class="number">86400</span> * <span class="number">1</span> * <span class="number">1000</span>;</span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span>(num == <span class="number">2</span>)&#123;</span><br><span class="line">			<span class="comment">// 7天前</span></span><br><span class="line">			SevenDayAgo = startTime - <span class="number">86400</span> * <span class="number">7</span> * <span class="number">1000</span>;</span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span>(num == <span class="number">3</span>) &#123;</span><br><span class="line">			<span class="comment">// 30天前</span></span><br><span class="line">			SevenDayAgo = startTime - <span class="number">86400</span> * <span class="number">30</span> * <span class="number">1000</span>;</span><br><span class="line">		&#125;<span class="keyword">else</span> <span class="keyword">if</span>(num == <span class="number">4</span>) &#123;</span><br><span class="line">			<span class="comment">// 一年前</span></span><br><span class="line">			SevenDayAgo = startTime - <span class="number">86400</span> * <span class="number">365</span> * <span class="number">1000</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		SevenDayAgo = <span class="built_in">this</span>.dateFormatDay(SevenDayAgo);</span><br><span class="line">	&#125;,</span><br></pre></td></tr></table></figure>



<h6 id="2-获取当前日期"><a href="#2-获取当前日期" class="headerlink" title="2. 获取当前日期"></a>2. 获取当前日期</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getNowFormatDate</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">        <span class="keyword">var</span> seperator1 = <span class="string">&quot;-&quot;</span>;</span><br><span class="line">        <span class="keyword">var</span> year = date.getFullYear();</span><br><span class="line">        <span class="keyword">var</span> month = date.getMonth() + <span class="number">1</span>;</span><br><span class="line">        <span class="keyword">var</span> strDate = date.getDate();</span><br><span class="line">        <span class="keyword">if</span> (month &gt;= <span class="number">1</span> &amp;&amp; month &lt;= <span class="number">9</span>) &#123;</span><br><span class="line">            month = <span class="string">&quot;0&quot;</span> + month;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (strDate &gt;= <span class="number">0</span> &amp;&amp; strDate &lt;= <span class="number">9</span>) &#123;</span><br><span class="line">            strDate = <span class="string">&quot;0&quot;</span> + strDate;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">var</span> currentdate = year + seperator1 + month + seperator1 + strDate;</span><br><span class="line">        <span class="keyword">return</span> currentdate;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h6 id="3-获取当前日期时间"><a href="#3-获取当前日期时间" class="headerlink" title="3. 获取当前日期时间"></a>3. 获取当前日期时间</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取当前日期时间</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">curentTime</span>(<span class="params"></span>)</span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> year = now.getFullYear();       <span class="comment">//年</span></span><br><span class="line">        vild</span><br><span class="line">        <span class="keyword">var</span> day = now.getDate();            <span class="comment">//日</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> hh = now.getHours();            <span class="comment">//时</span></span><br><span class="line">        <span class="keyword">var</span> mm = now.getMinutes();          <span class="comment">//分</span></span><br><span class="line">        <span class="keyword">var</span> ss = now.getSeconds();          <span class="comment">//分</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> clock = year + <span class="string">&quot;-&quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(month &lt; <span class="number">10</span>)</span><br><span class="line">            clock += <span class="string">&quot;0&quot;</span>;</span><br><span class="line"></span><br><span class="line">        clock += month + <span class="string">&quot;-&quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(day &lt; <span class="number">10</span>)</span><br><span class="line">            clock += <span class="string">&quot;0&quot;</span>;</span><br><span class="line"></span><br><span class="line">        clock += day + <span class="string">&quot; &quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(hh &lt; <span class="number">10</span>)</span><br><span class="line">            clock += <span class="string">&quot;0&quot;</span>;</span><br><span class="line"></span><br><span class="line">        clock += hh + <span class="string">&quot;:&quot;</span>;</span><br><span class="line">        <span class="keyword">if</span> (mm &lt; <span class="number">10</span>)</span><br><span class="line">            clock += <span class="string">&#x27;0&#x27;</span>;</span><br><span class="line">        clock += mm + <span class="string">&quot;:&quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (ss &lt; <span class="number">10</span>)</span><br><span class="line">            clock += <span class="string">&#x27;0&#x27;</span>;</span><br><span class="line">        clock += ss;</span><br><span class="line">        <span class="keyword">return</span> clock;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//定时执行setTime</span></span><br><span class="line">    <span class="built_in">setInterval</span>(<span class="string">&quot;setTime()&quot;</span>,<span class="number">1000</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//将id为currentTime的div更新为最新时间</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">setTime</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="string">&#x27;#currentTime&#x27;</span>).html(curentTime());</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h6 id="4-根据年月获取当月第一天和最后一天"><a href="#4-根据年月获取当月第一天和最后一天" class="headerlink" title="4.根据年月获取当月第一天和最后一天"></a>4.根据年月获取当月第一天和最后一天</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//根据年月获取当月第一天日期</span></span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">getStartDate</span>(<span class="params">yearmonthstr</span>)</span>&#123;</span><br><span class="line">            <span class="keyword">if</span>(<span class="regexp">/^\d&#123;4&#125;-\d&#123;2&#125;$/</span>.test(yearmonthstr))&#123; <span class="comment">//判断是否满足yyyy-mm条件</span></span><br><span class="line">                <span class="keyword">var</span> year = <span class="regexp">/\d&#123;4&#125;/</span>.exec(yearmonthstr)[<span class="number">0</span>];   <span class="comment">//获取年份</span></span><br><span class="line">                <span class="keyword">var</span> month = <span class="regexp">/\d&#123;2&#125;$/</span>.exec(yearmonthstr)[<span class="number">0</span>];  <span class="comment">//获取月份</span></span><br><span class="line">                <span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>(year, month, <span class="number">0</span>);</span><br><span class="line">                 <span class="keyword">var</span> day = d.getDate();  <span class="comment">//获取月的天数</span></span><br><span class="line">                 <span class="keyword">return</span> yearmonthstr+<span class="string">&#x27;-01&#x27;</span>;</span><br><span class="line">             &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//根据年月获取当月最后一天日期</span></span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">getEndDate</span>(<span class="params">yearmonthstr</span>)</span>&#123;</span><br><span class="line">            <span class="keyword">if</span>(<span class="regexp">/^\d&#123;4&#125;-\d&#123;2&#125;$/</span>.test(yearmonthstr))&#123; <span class="comment">//判断是否满足yyyy-mm条件</span></span><br><span class="line">                <span class="keyword">var</span> year = <span class="regexp">/\d&#123;4&#125;/</span>.exec(yearmonthstr)[<span class="number">0</span>];  <span class="comment">//获取年份</span></span><br><span class="line">                <span class="keyword">var</span> month = <span class="regexp">/\d&#123;2&#125;$/</span>.exec(yearmonthstr)[<span class="number">0</span>];  <span class="comment">//获取月份</span></span><br><span class="line">                <span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>(year, month, <span class="number">0</span>);</span><br><span class="line">                 <span class="keyword">var</span> day = d.getDate();  <span class="comment">//获取月的天数</span></span><br><span class="line">                 <span class="keyword">return</span> yearmonthstr+<span class="string">&#x27;-&#x27;</span>+day;</span><br><span class="line">             &#125;</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h6 id="5-转换时间戳"><a href="#5-转换时间戳" class="headerlink" title="5. 转换时间戳"></a>5. 转换时间戳</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">getLocalTime</span>(<span class="params">nS</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(nS);  <span class="comment">//时间戳为10位需*1000，时间戳为13位的话不需乘1000</span></span><br><span class="line">      <span class="keyword">let</span> Y = date.getFullYear() + <span class="string">&#x27;-&#x27;</span>;</span><br><span class="line">      <span class="keyword">let</span> M = ((date.getMonth() + <span class="number">1</span>) &lt; <span class="number">10</span>)? (<span class="string">&#x27;0&#x27;</span> + (date.getMonth() + <span class="number">1</span>) + <span class="string">&#x27;-&#x27;</span> ):((date.getMonth() + <span class="number">1</span>) + <span class="string">&#x27;-&#x27;</span>);</span><br><span class="line">      <span class="keyword">let</span> D = (date.getDate() &lt; <span class="number">10</span>) ? (<span class="string">&#x27;0&#x27;</span> + date.getDate() + <span class="string">&#x27; &#x27;</span>) : (date.getDate() + <span class="string">&#x27; &#x27;</span>);</span><br><span class="line">      <span class="keyword">let</span> h = (date.getHours() &lt; <span class="number">10</span>) ? (<span class="string">&#x27;0&#x27;</span> + date.getHours() + <span class="string">&#x27;:&#x27;</span>) : (date.getHours() + <span class="string">&#x27;:&#x27;</span>);</span><br><span class="line">      <span class="keyword">let</span> m = (date.getMinutes() &lt; <span class="number">10</span>) ? (<span class="string">&#x27;0&#x27;</span> + date.getMinutes() + <span class="string">&#x27;:&#x27;</span>) : (date.getMinutes() + <span class="string">&#x27;:&#x27;</span>);</span><br><span class="line">      <span class="keyword">let</span> s = (date.getSeconds() &lt; <span class="number">10</span>) ? (<span class="string">&#x27;0&#x27;</span> + date.getSeconds()) : (date.getSeconds());</span><br><span class="line">      <span class="keyword">return</span> Y + M + D + h + m + s;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>



<h6 id="6-获取时间戳"><a href="#6-获取时间戳" class="headerlink" title="6. 获取时间戳"></a>6. 获取时间戳</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timestamp = <span class="built_in">Date</span>.parse(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br></pre></td></tr></table></figure>



<h5 id="11-获取当前URL路径"><a href="#11-获取当前URL路径" class="headerlink" title="11. 获取当前URL路径"></a>11. 获取当前URL路径</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取当前窗口的Url</span></span><br><span class="line"><span class="keyword">var</span> url = <span class="built_in">window</span>.location.href;</span><br><span class="line"><span class="comment">//结果：http://localhost:61768/Home/Index?id=2&amp;age=18</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取当前窗口的主机名</span></span><br><span class="line"><span class="keyword">var</span> host = <span class="built_in">window</span>.location.host;</span><br><span class="line"><span class="comment">//结果：localhost:61768</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取当前窗口的端口</span></span><br><span class="line"><span class="keyword">var</span> port = <span class="built_in">window</span>.location.port;</span><br><span class="line"><span class="comment">//结果：61768</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取当前窗口的路径</span></span><br><span class="line"><span class="keyword">var</span> pathname = <span class="built_in">window</span>.location.pathname;</span><br><span class="line"><span class="comment">//结果：/Home/Index</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取当前文档的Url</span></span><br><span class="line"><span class="keyword">var</span> URL = <span class="built_in">document</span>.URL;</span><br><span class="line"><span class="comment">//结果：http://localhost:61768/Home/Index?id=2&amp;age=18</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取参数</span></span><br><span class="line"><span class="keyword">var</span> search = <span class="built_in">window</span>.location.search;</span><br><span class="line"><span class="comment">//结果：?id=2&amp;age=18</span></span><br></pre></td></tr></table></figure>



<p>分隔URL中的参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> search = <span class="built_in">window</span>.location.search;</span><br><span class="line"><span class="keyword">var</span> age = getSearchString(<span class="string">&#x27;age&#x27;</span>, search); <span class="comment">//结果：18</span></span><br><span class="line"><span class="keyword">var</span> id = getSearchString(<span class="string">&#x27;id&#x27;</span>, search); <span class="comment">//结果：2</span></span><br><span class="line"><span class="comment">//key(需要检索的键） url（传入的需要分割的url地址，例：?id=2&amp;age=18）</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSearchString</span>(<span class="params">key, Url</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> str = Url;</span><br><span class="line">    str = str.substring(<span class="number">1</span>, str.length); <span class="comment">// 获取URL中?之后的字符（去掉第一位的问号）</span></span><br><span class="line">    <span class="comment">// 以&amp;分隔字符串，获得类似name=xiaoli这样的元素数组</span></span><br><span class="line">    <span class="keyword">var</span> arr = str.split(<span class="string">&quot;&amp;&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 将每一个数组元素以=分隔并赋给obj对象 </span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> tmp_arr = arr[i].split(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">        obj[<span class="built_in">decodeURIComponent</span>(tmp_arr[<span class="number">0</span>])] = <span class="built_in">decodeURIComponent</span>(tmp_arr[<span class="number">1</span>]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> obj[key];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h5 id="12-两个路由间传值"><a href="#12-两个路由间传值" class="headerlink" title="12. 两个路由间传值"></a>12. 两个路由间传值</h5><h6 id="1-在main-js中-全局注册："><a href="#1-在main-js中-全局注册：" class="headerlink" title="1. 在main.js中 全局注册："></a>1. 在main.js中 全局注册：</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.eventBus = <span class="keyword">new</span> Vue();</span><br></pre></td></tr></table></figure>

<h6 id="2-用emit发送："><a href="#2-用emit发送：" class="headerlink" title="2. 用emit发送："></a>2. 用emit发送：</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.eventBus.$emit(<span class="string">&quot;data&quot;</span>,<span class="built_in">this</span>.multipleSelection);</span><br></pre></td></tr></table></figure>

<h6 id="3-用-on接受："><a href="#3-用-on接受：" class="headerlink" title="3. 用$on接受："></a>3. 用$on接受：</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.eventBus.$on(<span class="string">&quot;data&quot;</span>, <span class="function">(<span class="params">val</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val);</span><br><span class="line">      &#125;);</span><br></pre></td></tr></table></figure>

<h6 id="4-销毁"><a href="#4-销毁" class="headerlink" title="4. 销毁"></a>4. 销毁</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">beforeDestroy</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="built_in">window</span>.eventBus.$off(<span class="string">&#x27;data&#x27;</span>);</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h5 id="13-Storage用法"><a href="#13-Storage用法" class="headerlink" title="13. Storage用法"></a>13. Storage用法</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">存：</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> obj = &#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;xiaoming&quot;</span>,<span class="string">&quot;age&quot;</span>:<span class="string">&quot;16&quot;</span>&#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// sessionStorage   localStorage</span></span><br><span class="line">    sessionStorage.setItem(<span class="string">&quot;userInfo&quot;</span>,<span class="built_in">JSON</span>.stringify(obj));</span><br><span class="line"></span><br><span class="line">取：</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> user = <span class="built_in">JSON</span>.parse(sessionStorage.getItem(<span class="string">&quot;userInfo&quot;</span>))</span><br><span class="line"></span><br><span class="line">删除：</span><br><span class="line"></span><br><span class="line">    sessionStorage.removeItem(<span class="string">&quot;userInfo);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">清空：</span></span><br><span class="line"><span class="string">    sessionStorage.clear();</span></span><br></pre></td></tr></table></figure>



<h5 id="14-判断字符串是否为空"><a href="#14-判断字符串是否为空" class="headerlink" title="14. 判断字符串是否为空"></a>14. 判断字符串是否为空</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">item.chauffeur != <span class="literal">null</span> &amp;&amp; item.chauffeur.length != <span class="number">0</span>   <span class="comment">// 先判断类型，后判断长度</span></span><br></pre></td></tr></table></figure>



<h5 id="15-返回上一次选择的check"><a href="#15-返回上一次选择的check" class="headerlink" title="15. 返回上一次选择的check"></a>15. 返回上一次选择的check</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> nowVal;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">this</span>.arr.length &gt; val.length) &#123;</span><br><span class="line">      <span class="keyword">let</span> ids = val.map(<span class="function"><span class="params">item</span> =&gt;</span> item.kindcode);</span><br><span class="line">      nowVal = <span class="built_in">this</span>.arr.filter(<span class="function"><span class="params">item</span> =&gt;</span> !ids.includes(item.kindcode));</span><br><span class="line"></span><br><span class="line">      <span class="built_in">this</span>.tableData.find(</span><br><span class="line">        item =&gt; item.kindcode == nowVal[<span class="number">0</span>].kindcode</span><br><span class="line">      ).checked = <span class="literal">false</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> ids = <span class="built_in">this</span>.arr.map(<span class="function"><span class="params">item</span> =&gt;</span> item.kindcode);</span><br><span class="line">      nowVal = val.filter(<span class="function"><span class="params">item</span> =&gt;</span> !ids.includes(item.kindcode));</span><br><span class="line"></span><br><span class="line">      nowVal[<span class="number">0</span>].checked = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>



<h5 id="16-判断一个值是否是is-not-fined-未申明"><a href="#16-判断一个值是否是is-not-fined-未申明" class="headerlink" title="16. 判断一个值是否是is not fined(未申明)"></a>16. 判断一个值是否是is not fined(未申明)</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">     <span class="comment">// 已声明</span></span><br><span class="line">     <span class="keyword">if</span> (form.fullPath == <span class="string">&quot;/detailsSheet&quot;</span>) &#123;</span><br><span class="line">       next(<span class="function"><span class="params">vm</span> =&gt;</span> (vm.isData = <span class="literal">true</span>));</span><br><span class="line">     &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">       next(<span class="function"><span class="params">vm</span> =&gt;</span> (vm.isData = <span class="literal">false</span>));</span><br><span class="line">     &#125;</span><br><span class="line">   &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">     <span class="comment">// 未声明</span></span><br><span class="line">     next(<span class="function"><span class="params">vm</span> =&gt;</span> (vm.isData = <span class="literal">false</span>))</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>



<h5 id="17-冒泡排序"><a href="#17-冒泡排序" class="headerlink" title="17. 冒泡排序"></a>17. 冒泡排序</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 冒泡排序函数</span></span><br><span class="line"><span class="comment"> * arr 需要排序的数组</span></span><br><span class="line"><span class="comment"> * mode 排序的模式(positive正序，reverse倒序)</span></span><br><span class="line"><span class="comment"> * according 如果数组里面的元素是对象，该参数传根据对象中的哪个元素进行排序(可不传递)</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bubbleSort</span>(<span class="params">arr, mode, according</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (according) &#123;</span><br><span class="line">    <span class="keyword">if</span> (mode == <span class="string">&#x27;positive&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">          <span class="keyword">if</span> (arr[j][according] &gt; arr[j + <span class="number">1</span>][according]) &#123;</span><br><span class="line">            <span class="keyword">var</span> tmp = arr[j]</span><br><span class="line">            arr[j] = arr[j + <span class="number">1</span>]</span><br><span class="line">            arr[j + <span class="number">1</span>] = tmp</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        arr[i][<span class="string">&#x27;ranking&#x27;</span>] = i + <span class="number">1</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (mode == <span class="string">&#x27;reverse&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">          <span class="keyword">if</span> (arr[j][according] &lt; arr[j + <span class="number">1</span>][according]) &#123;</span><br><span class="line">            <span class="keyword">var</span> tmp = arr[j]</span><br><span class="line">            arr[j] = arr[j + <span class="number">1</span>]</span><br><span class="line">            arr[j + <span class="number">1</span>] = tmp</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        arr[i][<span class="string">&#x27;ranking&#x27;</span>] = i</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (mode == <span class="string">&#x27;positive&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">          <span class="keyword">if</span> (arr[j] &gt; arr[j + <span class="number">1</span>]) &#123;</span><br><span class="line">            <span class="keyword">var</span> tmp = arr[j]</span><br><span class="line">            arr[j] = arr[j + <span class="number">1</span>]</span><br><span class="line">            arr[j + <span class="number">1</span>] = tmp</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (mode == <span class="string">&#x27;reverse&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">          <span class="keyword">if</span> (arr[j] &lt; arr[j + <span class="number">1</span>]) &#123;</span><br><span class="line">            <span class="keyword">var</span> tmp = arr[j]</span><br><span class="line">            arr[j] = arr[j + <span class="number">1</span>]</span><br><span class="line">            arr[j + <span class="number">1</span>] = tmp</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">  bubbleSort</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h5 id="18-累计reduce"><a href="#18-累计reduce" class="headerlink" title="18. 累计reduce()"></a>18. 累计reduce()</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">xxx.forEach(<span class="function"><span class="params">item</span> =&gt;</span>&#123;</span><br><span class="line">          <span class="keyword">let</span> func = <span class="function">(<span class="params">...numbers</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> numbers.reduce(</span><br><span class="line">              (count, item) =&gt; (count += <span class="built_in">Number</span>(item)),</span><br><span class="line">              <span class="number">0</span></span><br><span class="line">            );</span><br><span class="line">          &#125;;</span><br><span class="line">          item.totalNumber = func(</span><br><span class="line">            item.picc,</span><br><span class="line">            item.pa,</span><br><span class="line">            item.tb,</span><br><span class="line">            item.gs,</span><br><span class="line">            item.other</span><br><span class="line">          );</span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;)</span><br></pre></td></tr></table></figure>



<h5 id="19-使用some方法判断是否有满足条件的元素"><a href="#19-使用some方法判断是否有满足条件的元素" class="headerlink" title="19. 使用some方法判断是否有满足条件的元素"></a>19. 使用some方法判断是否有满足条件的元素</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>]</span><br><span class="line"><span class="keyword">let</span> isHasNum = <span class="function"><span class="params">n</span> =&gt;</span> arr.some(<span class="function"><span class="params">num</span> =&gt;</span> num === n)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>]</span><br><span class="line"><span class="keyword">let</span> isHasNum = <span class="function">(<span class="params">n, arr</span>) =&gt;</span> arr.some(<span class="function"><span class="params">num</span> =&gt;</span> num === n)</span><br></pre></td></tr></table></figure>



<h5 id="20-使用filter方法过滤原数组，形成新数组"><a href="#20-使用filter方法过滤原数组，形成新数组" class="headerlink" title="20. 使用filter方法过滤原数组，形成新数组"></a>20. 使用filter方法过滤原数组，形成新数组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>]</span><br><span class="line"><span class="keyword">let</span> newArr = arr.filter(<span class="function"><span class="params">n</span> =&gt;</span> n &gt; <span class="number">4</span>) <span class="comment">// [5, 7]</span></span><br></pre></td></tr></table></figure>



<h5 id="21-使用map对数组中所有元素批量处理，形成新数组"><a href="#21-使用map对数组中所有元素批量处理，形成新数组" class="headerlink" title="21. 使用map对数组中所有元素批量处理，形成新数组"></a>21. 使用map对数组中所有元素批量处理，形成新数组</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>]</span><br><span class="line"><span class="keyword">let</span> newArr = arr.map(<span class="function"><span class="params">n</span> =&gt;</span> n + <span class="number">1</span>) <span class="comment">// [2, 4, 6, 8]</span></span><br></pre></td></tr></table></figure>



<h5 id="22-使用Object-values快速获取对象键值"><a href="#22-使用Object-values快速获取对象键值" class="headerlink" title="22. 使用Object.values快速获取对象键值"></a>22. 使用Object.values快速获取对象键值</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> values = <span class="built_in">Object</span>.values(obj) <span class="comment">// [1, 2]</span></span><br></pre></td></tr></table></figure>



<h5 id="23-使用Object-keys快速获取对象键名"><a href="#23-使用Object-keys快速获取对象键名" class="headerlink" title="23. 使用Object.keys快速获取对象键名"></a>23. 使用Object.keys快速获取对象键名</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> keys = <span class="built_in">Object</span>.keys(obj) <span class="comment">// [&#x27;a&#x27;, &#x27;b&#x27;]</span></span><br></pre></td></tr></table></figure>



<h5 id="24-解构数组进行变量值的替换"><a href="#24-解构数组进行变量值的替换" class="headerlink" title="24. 解构数组进行变量值的替换"></a>24. 解构数组进行变量值的替换</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let a&#x3D;1,b&#x3D;2,</span><br><span class="line">[b,a] &#x3D; [a,b]</span><br></pre></td></tr></table></figure>



<h5 id="26-解构对象"><a href="#26-解构对象" class="headerlink" title="26. 解构对象"></a>26. 解构对象</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">setForm (&#123;name, age&#125;) &#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">    <span class="built_in">this</span>.age = age </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h5 id="27-解构时重命名简化命名"><a href="#27-解构时重命名简化命名" class="headerlink" title="27. 解构时重命名简化命名"></a>27. 解构时重命名简化命名</h5><p>有的后端返回的键名特别长，你可以这样干</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">setForm (&#123;aaa_bbb_ccc_ddd, eee_fff_ggg&#125;) &#123;</span><br><span class="line">    <span class="built_in">this</span>.one = aaa_bbb_ccc_ddd</span><br><span class="line">    <span class="built_in">this</span>.two = eee_fff_ggg</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// best</span></span><br><span class="line">setForm (&#123;<span class="attr">aaa_bbb_ccc_ddd</span>: one, <span class="attr">eee_fff_ggg</span>: two&#125;) &#123;</span><br><span class="line">    <span class="built_in">this</span>.one = one</span><br><span class="line">    <span class="built_in">this</span>.two = two</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h5 id="28-解构时设置默认值"><a href="#28-解构时设置默认值" class="headerlink" title="28. 解构时设置默认值"></a>28. 解构时设置默认值</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">setForm (&#123;name, age = <span class="number">16</span>&#125;) &#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">    <span class="built_in">this</span>.age = age </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h5 id="29-amp-amp-短路符判断依赖的键是否存在防止报错’xxx-of-undfined’"><a href="#29-amp-amp-短路符判断依赖的键是否存在防止报错’xxx-of-undfined’" class="headerlink" title="29. &amp;&amp;短路符判断依赖的键是否存在防止报错’xxx of undfined’"></a>29. &amp;&amp;短路符判断依赖的键是否存在防止报错’xxx of undfined’</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    name: <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">    age: <span class="number">38</span>,</span><br><span class="line">    children: &#123;</span><br><span class="line">        name: <span class="string">&#x27;张小三&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> childrenName = person.children &amp;&amp; person.childre.name</span><br></pre></td></tr></table></figure>



<h5 id="30-函数参数校验"><a href="#30-函数参数校验" class="headerlink" title="30. 函数参数校验"></a>30. 函数参数校验</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> checkoutType = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;参数不能为空&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> findStudentByAge = <span class="function">(<span class="params">arr, age = checkoutType()</span>) =&gt;</span> arr.filter(<span class="function"><span class="params">num</span> =&gt;</span> num === age)</span><br></pre></td></tr></table></figure>



<h5 id="31-this-set-obj-key-value-amp-amp-vue-set-obj-key-value"><a href="#31-this-set-obj-key-value-amp-amp-vue-set-obj-key-value" class="headerlink" title="31. this.$set(obj, key, value) &amp;&amp; vue.set(obj, key, value)"></a>31. this.$set(obj, key, value) &amp;&amp; vue.set(obj, key, value)</h5><p>vue2.0 给data对象新增属性，并触发视图更新</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        student: &#123;</span><br><span class="line">            name: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">            sex: <span class="string">&#x27;&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>众所周知，直接给student赋值操作，虽然可以新增属性，<strong>但是不会触发视图更新</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted () &#123;</span><br><span class="line">    <span class="built_in">this</span>.student.age = <span class="number">24</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>原因是：<strong>受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。</strong></p>
<p>要处理这种情况，我们可以使用**$set()**方法，既可以新增属性,又可以触发视图更新。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">mounted () &#123;</span><br><span class="line">    <span class="built_in">this</span>.$set(<span class="built_in">this</span>.student,<span class="string">&quot;age&quot;</span>, <span class="number">24</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//  下面是自用实例</span></span><br><span class="line"> 	api.monthLossRatioStatistics(params).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        res.list.forEach(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">let</span> obj = &#123;</span><br><span class="line">            rate: (item.rate * <span class="number">100</span>).toFixed(<span class="number">1</span>),</span><br><span class="line">            date: item.tjmonth.split(<span class="string">&quot;-&quot;</span>)[<span class="number">1</span>]</span><br><span class="line">          &#125;;</span><br><span class="line">          <span class="built_in">this</span>.$set(<span class="built_in">this</span>.compensate.rows, index, obj);</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="built_in">this</span>.presentationData[<span class="number">0</span>].number = <span class="built_in">this</span>.compensate.rows[</span><br><span class="line">          <span class="built_in">this</span>.compensate.rows.length - <span class="number">1</span></span><br><span class="line">        ].rate;</span><br><span class="line">      &#125;);</span><br></pre></td></tr></table></figure>



<h5 id="32-Object-assign"><a href="#32-Object-assign" class="headerlink" title="32. Object.assign()"></a>32. Object.assign()</h5><p>给对象添加少量属性可以用上面的this.$set() ，如果需要大量的修改 则可以用这个属性；创建一个新的对象，合并原来对象和混入对象的属性；用法如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.someObject = <span class="built_in">Object</span>.assign(&#123;&#125;, <span class="built_in">this</span>.someObject,&#123;<span class="attr">newProperty1</span>: <span class="number">1</span>, <span class="attr">newProperty2</span>: <span class="number">2</span> ...&#125;)</span><br></pre></td></tr></table></figure>



<h5 id="33-发送短信60s处理"><a href="#33-发送短信60s处理" class="headerlink" title="33. 发送短信60s处理"></a>33. 发送短信60s处理</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">codeClick</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">			<span class="keyword">let</span> count = <span class="number">60</span>;</span><br><span class="line">			<span class="keyword">let</span> reg = <span class="regexp">/^1[0123456789]\d&#123;9&#125;$/</span>;</span><br><span class="line">            <span class="keyword">let</span> bool = reg.test(<span class="built_in">this</span>.userPhone);</span><br><span class="line">            <span class="keyword">let</span> timer;</span><br><span class="line">			<span class="keyword">let</span> func = <span class="function">()=&gt;</span>&#123;</span><br><span class="line">				<span class="keyword">if</span>(count &lt;= <span class="number">60</span> &amp;&amp; count &gt; <span class="number">0</span>) &#123;</span><br><span class="line">					<span class="built_in">this</span>.authenticationCode = count-- + <span class="string">&#x27; &#x27;</span> + <span class="string">&#x27;S&#x27;</span>;</span><br><span class="line">					<span class="built_in">this</span>.isColor = <span class="string">&#x27;#888888&#x27;</span>;</span><br><span class="line">				&#125;<span class="keyword">else</span> <span class="keyword">if</span>(count &lt;= <span class="number">60</span>)&#123;</span><br><span class="line">                    <span class="comment">// 秒数走完 ，清除定时器</span></span><br><span class="line">					<span class="built_in">clearInterval</span>(timer);</span><br><span class="line">					<span class="built_in">this</span>.authenticationCode = <span class="string">&#x27;获取验证码&#x27;</span>;</span><br><span class="line">					<span class="built_in">this</span>.isColor = <span class="string">&#x27;#ee0a24&#x27;</span>;</span><br><span class="line">					<span class="built_in">this</span>.isDisabled = <span class="literal">false</span>;</span><br><span class="line">					count = <span class="number">60</span>;</span><br><span class="line">				&#125;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">			<span class="keyword">if</span>(bool)&#123;</span><br><span class="line">                <span class="keyword">if</span>(<span class="built_in">this</span>.userPhone == <span class="built_in">this</span>.retUserPhone) &#123;</span><br><span class="line">                <span class="built_in">this</span>.$toast(&#123;</span><br><span class="line">                    message: <span class="string">&quot;新手机号码与原手机号码相同！&quot;</span>,</span><br><span class="line">                    icon: <span class="string">&quot;close&quot;</span></span><br><span class="line">                &#125;);</span><br><span class="line">                &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">                    <span class="comment">// 执行成功操作</span></span><br><span class="line">                    <span class="built_in">this</span>.isDisabled = <span class="literal">true</span>;</span><br><span class="line">				    timer = <span class="built_in">setInterval</span>(func, <span class="number">1000</span>)</span><br><span class="line">                    func();</span><br><span class="line">                    <span class="keyword">let</span> params = &#123;</span><br><span class="line">					  openid: <span class="built_in">this</span>.openid,</span><br><span class="line">					  mobile: <span class="built_in">this</span>.userPhone.trim()</span><br><span class="line">                    &#125;;</span><br><span class="line">                    api.SendPhoneMsg(params);</span><br><span class="line">                &#125;</span><br><span class="line">			&#125;<span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="built_in">this</span>.$toast(&#123;</span><br><span class="line">                    message: <span class="string">&quot;手机号码格式有误！&quot;</span>,</span><br><span class="line">                    icon: <span class="string">&quot;close&quot;</span></span><br><span class="line">                &#125;);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">// 组件销毁时 清除定时器</span></span><br><span class="line">			<span class="built_in">this</span>.$once(<span class="string">&quot;beforeDestroy&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">				<span class="built_in">clearInterval</span>(timer);</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;,</span><br></pre></td></tr></table></figure>



<h5 id="34-策略模式"><a href="#34-策略模式" class="headerlink" title="34. 策略模式"></a>34. 策略模式</h5><p>策略模式的使用，避免过多的<code>if else</code>判断，也可以替代简单逻辑的<code>switch</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> formatDemandItemType = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">switch</span> (value) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&#x27;基础&#x27;</span></span><br><span class="line">        <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&#x27;高级&#x27;</span></span><br><span class="line">        <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&#x27;VIP&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 策略模式</span></span><br><span class="line"><span class="keyword">const</span> formatDemandItemType2 = <span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> obj = &#123;</span><br><span class="line">        <span class="number">1</span>: <span class="string">&#x27;基础&#x27;</span>,</span><br><span class="line">        <span class="number">2</span>: <span class="string">&#x27;高级&#x27;</span>,</span><br><span class="line">        <span class="number">3</span>: <span class="string">&#x27;VIP&#x27;</span>,</span><br><span class="line">    &#125; </span><br><span class="line">    <span class="keyword">return</span> obj[value]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h5 id="35-执行浏览器复制到粘贴板"><a href="#35-执行浏览器复制到粘贴板" class="headerlink" title="35. 执行浏览器复制到粘贴板"></a>35. 执行浏览器复制到粘贴板</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">infantCopyLink</span>(<span class="params">e</span>)</span> &#123;</span><br><span class="line">    e.currentTarget.previousElementSibling.select(); <span class="comment">// 选择对象</span></span><br><span class="line">    <span class="built_in">document</span>.execCommand(<span class="string">&quot;Copy&quot;</span>); <span class="comment">// 执行浏览器复制命令</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>



<h5 id="36-once"><a href="#36-once" class="headerlink" title="36. once"></a>36. once</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 执行一次 用于销毁组件，定时器等。</span></span><br><span class="line"><span class="comment">// 组件销毁时 清除定时器</span></span><br><span class="line">timer = <span class="built_in">setInterval</span>(func, <span class="number">1000</span>);</span><br><span class="line"><span class="built_in">this</span>.$once(<span class="string">&quot;beforeDestroy&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">	<span class="built_in">clearInterval</span>(timer);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="37-every-和some-判断一个数组对象中的所有数据或某个值都满足条件"><a href="#37-every-和some-判断一个数组对象中的所有数据或某个值都满足条件" class="headerlink" title="37. every()和some() 判断一个数组对象中的所有数据或某个值都满足条件"></a>37. every()和some() 判断一个数组对象中的所有数据或某个值都满足条件</h5><p>every() 只要有一个不符合条件就为 false (一假即假)</p>
<p>some() 只要有一个符合条件就位 true (一真即真)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">66</span>, <span class="number">34</span>, <span class="number">643</span>, <span class="number">774</span>, <span class="number">64</span>, <span class="number">834</span> ];</span><br><span class="line"><span class="built_in">console</span>.log( arr.every(<span class="function">(<span class="params">a</span>)=&gt;</span> a&gt;=<span class="number">100</span>) ) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log( arr.some(<span class="function">(<span class="params">a</span>)=&gt;</span> a&gt;=<span class="number">40</span> ) ) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arrObj = [</span><br><span class="line">    &#123; <span class="attr">status</span>:<span class="number">0</span>, <span class="attr">id</span>:<span class="number">1</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">status</span>:<span class="number">1</span>, <span class="attr">id</span>:<span class="number">2</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">status</span>:<span class="number">0</span>, <span class="attr">id</span>:<span class="number">3</span> &#125;,</span><br><span class="line">]</span><br><span class="line"><span class="built_in">console</span>.log( arrObj.every( <span class="function">(<span class="params">val</span>) =&gt;</span> val.status===<span class="number">0</span>) );<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log( arrObj.some( <span class="function">(<span class="params">val</span>) =&gt;</span> val.id===<span class="number">2</span>) );<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<h5 id="38-接收后端返回二进制图片"><a href="#38-接收后端返回二进制图片" class="headerlink" title="38. 接收后端返回二进制图片"></a>38. 接收后端返回二进制图片</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.URL.createObjectURL(res);</span><br></pre></td></tr></table></figure>



<h5 id="39-Vue过滤器的用法"><a href="#39-Vue过滤器的用法" class="headerlink" title="39. Vue过滤器的用法"></a>39. Vue过滤器的用法</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-table-column prop=<span class="string">&quot;overstatus&quot;</span> label=<span class="string">&quot;修改状态&quot;</span> fixed=<span class="string">&quot;right&quot;</span> width=<span class="string">&quot;110&quot;</span>&gt;</span><br><span class="line">   &lt;template slot-scope=<span class="string">&quot;&#123; row &#125;&quot;</span>&gt;</span><br><span class="line">         &#123;&#123; row.overstatus | statusFilter &#125;&#125;</span><br><span class="line">   &lt;/template&gt;</span><br><span class="line"> &lt;/el-table-column&gt;</span><br><span class="line">data: &#123;</span><br><span class="line">    reutrn &#123;&#125;</span><br><span class="line">&#125;,</span><br><span class="line">filters: &#123;</span><br><span class="line">        <span class="comment">// 转换修改状态</span></span><br><span class="line">        <span class="function"><span class="title">statusFilter</span>(<span class="params">val</span>)</span> &#123;</span><br><span class="line">            <span class="keyword">switch</span>(val) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;0&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;未修改&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;2&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;修改不一致&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;3&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;已修改一致&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;4&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;已分配未修改&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;未修改&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;0&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;修改不一致&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;2&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;已修改一致&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;3&#x27;</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="string">&#x27;已分配未修改&#x27;</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;4&#x27;</span>;</span><br><span class="line">                <span class="keyword">default</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>



<h5 id="40-隐藏手机中间位数"><a href="#40-隐藏手机中间位数" class="headerlink" title="40. 隐藏手机中间位数"></a>40. 隐藏手机中间位数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tel = <span class="string">&quot;13122223333&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/^(\d&#123;3&#125;)\d&#123;4&#125;(\d&#123;4&#125;)$/</span>;</span><br><span class="line"></span><br><span class="line">tel = tel.replace(reg, <span class="string">&quot;$1****$2&quot;</span>);</span><br></pre></td></tr></table></figure>

<h5 id="41-上传图片增加水印"><a href="#41-上传图片增加水印" class="headerlink" title="41. 上传图片增加水印"></a>41. 上传图片增加水印</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 上传图片后的回调</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 	此处是用的vant的上传组件。</span></span><br><span class="line"><span class="comment">* 	原生请用input change属性回调</span></span><br><span class="line"><span class="comment">* 	file.file的格式  请找对此格式在调用方法</span></span><br><span class="line"><span class="comment">*  	lastModified: 1247549551674</span></span><br><span class="line"><span class="comment">*   lastModifiedDate: Tue Jul 14 2009 13:32:31 GMT+0800 (中国标准时间) &#123;&#125;</span></span><br><span class="line"><span class="comment">*   name: &quot;Lighthouse.jpg&quot;</span></span><br><span class="line"><span class="comment">*   size: 561276</span></span><br><span class="line"><span class="comment">*   type: &quot;image/jpeg&quot;</span></span><br><span class="line"><span class="comment">*   webkitRelativePath: &quot;&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="title">afterRead</span>(<span class="params">file</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> img = <span class="keyword">await</span> <span class="built_in">this</span>.blobToImg(file.file)</span><br><span class="line">    <span class="keyword">let</span> canvas = <span class="keyword">await</span> <span class="built_in">this</span>.imgToCanvas(img)</span><br><span class="line">    <span class="keyword">let</span> blob = <span class="keyword">await</span> <span class="built_in">this</span>.watermark(canvas, <span class="string">&#x27;测试水印&#x27;</span>)</span><br><span class="line">    <span class="comment">// 此处将Blob读取到img标签，并在dom内渲染出来；如果是上传文件，可以将blob添加到FormData中</span></span><br><span class="line">    <span class="keyword">let</span> newImage = <span class="keyword">await</span> <span class="built_in">this</span>.blobToImg(blob)</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 此处是直接替换掉上传的图片 用作回显</span></span><br><span class="line">    file.content = newImage.src;</span><br><span class="line">    <span class="comment">// 什么需求看用什么</span></span><br><span class="line">    <span class="comment">// 此处是把newImage标签插入到DOM节点中</span></span><br><span class="line">    <span class="comment">// this.newImageData = newImage;</span></span><br><span class="line">    <span class="comment">// document.getElementById(&#x27;contentImg&#x27;).appendChild(newImage);</span></span><br><span class="line">&#125;,</span><br><span class="line">    </span><br><span class="line"><span class="comment">// 读取图像文件渲染到img标签</span></span><br><span class="line">lobToImg (blob) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> reader = <span class="keyword">new</span> FileReader()</span><br><span class="line">        reader.addEventListener(<span class="string">&#x27;load&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">                 <span class="keyword">let</span> img = <span class="keyword">new</span> Image()</span><br><span class="line">                 img.src = reader.result</span><br><span class="line">                 img.addEventListener(<span class="string">&#x27;load&#x27;</span>, <span class="function">() =&gt;</span> resolve(img))</span><br><span class="line">        &#125;)</span><br><span class="line">        reader.readAsDataURL(blob)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line">		</span><br><span class="line"><span class="comment">// 将img标签内容绘制到canvas画布</span></span><br><span class="line">imgToCanvas (img) &#123;</span><br><span class="line">	<span class="keyword">let</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">&#x27;canvas&#x27;</span>)</span><br><span class="line">	canvas.width = img.width</span><br><span class="line">	canvas.height = img.height</span><br><span class="line">	<span class="keyword">let</span> ctx = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>)</span><br><span class="line">	ctx.drawImage(img, <span class="number">0</span>, <span class="number">0</span>)</span><br><span class="line">	<span class="keyword">return</span> canvas</span><br><span class="line">&#125;,</span><br><span class="line">		</span><br><span class="line"><span class="comment">// canvas画布上绘制水印并转换为Blob对象</span></span><br><span class="line">watermark (canvas, text) &#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">let</span> ctx = canvas.getContext(<span class="string">&#x27;2d&#x27;</span>)</span><br><span class="line">		<span class="comment">// 设置填充字号和字体，样式</span></span><br><span class="line">		ctx.font = <span class="string">&quot;99px 宋体&quot;</span></span><br><span class="line">		ctx.fillStyle = <span class="string">&quot;#000&quot;</span></span><br><span class="line">		<span class="comment">// 设置右对齐</span></span><br><span class="line">		ctx.textAlign = <span class="string">&#x27;right&#x27;</span></span><br><span class="line">		<span class="comment">// 在指定位置绘制文字，这里指定距离右下角20坐标的地方</span></span><br><span class="line">		ctx.fillText(text, canvas.width - <span class="number">20</span>, canvas.height - <span class="number">20</span>)</span><br><span class="line">		canvas.toBlob(<span class="function"><span class="params">blob</span> =&gt;</span> resolve(blob))</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://xulujin.gitee.io/blog/2020/07/17/%E5%BB%96%E5%93%A5%E5%93%A5%E5%B7%A5%E4%BD%9C%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/" title="廖哥哥在工作中遇到的问题" target="_blank" rel="external">https://xulujin.gitee.io/blog/2020/07/17/%E5%BB%96%E5%93%A5%E5%93%A5%E5%B7%A5%E4%BD%9C%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/1314xulujin" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/blog/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/1314xulujin" target="_blank"><span class="text-dark">LuKing-Xun</span><small class="ml-1x">前端工程师</small></a></h3>
        <div>邮箱:luking-xun@qq.com 微信:Element-UI</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	

    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/blog/2020/07/17/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88%E9%81%8D%E5%8E%86%E5%92%8C%E5%B9%BF%E5%BA%A6%E4%BC%98%E5%85%88%E9%81%8D%E5%8E%86/" title="深度优先遍历和广度优先遍历"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;Newer</span></a>
    </li>
    
    
    <li class="next">
      <a href="/blog/2020/07/16/%E6%9D%8E%E6%B7%B1%E9%9D%A2%E8%AF%95%E7%BB%8F%E9%AA%8C%E9%A2%98%E7%9B%AE/" title="李深面试经验题目"><span>Older&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>$</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>Maybe you could buy me a cup of coffee.</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/blog/images/donate/alipay.jpg" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open alipay app scan this qrcode, buy me a coffee!</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/blog/images/donate/wechatpay.jpg" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open wechat app scan this qrcode, buy me a coffee!</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> alipay</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> wechat payment</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/1314xulujin" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://mail.qq.com/cgi-bin/loginpage" target="_blank" title="Email" data-toggle=tooltip data-placement=top><i class="icon icon-email"></i></a></li>
        
        <li><a href="/blog/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	<!-- Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>. -->
            更多功能正在开发中...
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/blog/js/plugin.min.js"></script>


<script src="/blog/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/blog/',
        CONTENT_URL: '/blog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blog/js/insight.js"></script>






   




   
    
<script src="//cdn.jsdelivr.net/npm/gitment@0.0.3/dist/gitment.browser.min.js"></script>
<script>
var gitment = new Gitment({
  // id默认为当前页面url，如果url后带参数或锚点，gitment要重新初始化
  // https://github.com/imsun/gitment/issues/55
  // 解决方案：id:window.location.pathname,或者将id设置为当前页面标题
  id: '廖哥哥在工作中遇到的问题', 
  owner: '1314xulujin', // 可以是你的GitHub用户名，也可以是github id
  repo: '1314xulujin.github.io',
  oauth: {
    client_id: 'f5572d863183b5e79cf9',
    client_secret: '8754b0d4afae1b366e75b4058a4b83a66ed82f05',
  }
})
gitment.render('comments')
</script>









</body>
</html>